<template>
	<div>
		<div class="back_btn">
			< 
		</div>
				<div class="movie-filter">
					<div class="box">
						<div class="pic">
							<img :src="detailsMovieList.img">
						</div>
						<div class="details">
							<div class="title">
								{{detailsMovieList.nm}}
							</div>
							<div class="title-en-name">
								{{detailsMovieList.enm}}
							</div>
							<div class="score">
								<div class="wantSee" v-if="detailsMovieList.sc==0 && detailsMovieList.globalReleased==false">{{detailsMovieList.bingeWatch}}想看</div>
								<div v-if="detailsMovieList.sc!=0 && detailsMovieList.globalReleased==true">{{detailsMovieList.sc}} <span class="snum">{{detailsMovieList.snum}}万人评</span></div>
								<span class="no-score" v-if="detailsMovieList.sc==0 && detailsMovieList.globalReleased==true">暂无评分</span>
							</div>
							
							<div class="type">
								{{detailsMovieList.cat}}
							</div>
							<div class="src">
								{{detailsMovieList.src}}/{{detailsMovieList.dur}}分钟
							</div>
							<div class="pubDesc">
								{{detailsMovieList.pubDesc}}
							</div>

						</div>
					</div>
				</div>
		</div>
</template>

<script>

import axios from "axios"
import  api from '@/api/index.js'
export default {
	data:function(){
		return {
			detailsMovieList:{}
		}
	},

	computed: {
		movieTitle() {
			return this.$store.state.movieTitle;
		}
	},
	methods:{
		setImgSrc(imgUrl){
			console.log(typeof imgUrl)
			return imgUrl.replace(/\w.h/,"148.208");
		},
		getData(){
	//		数据请求,参数版本
			var id=this.$route.fullPath.slice(this.$route.fullPath.indexOf("=")+1)
			console.log(id)
			axios.get(api.detailmovie,{
				params:{
					movieId:id
				}
			})
			.then((res)=>{
				console.log(res.data.detailMovie);
				this.detailsMovieList=res.data.detailMovie;
				this.detailsMovieList.img=this.detailsMovieList.img.replace(/\w.h/,"148.208");
				
			})
		},
		changeHtitle(){
			console.log(this.detailsMovieList.nm)
				this.$store.commit("setHTitle",{
					
					hTitle:this.detailsMovieList.nm
				})
			}
	},
	mounted() {
		this.getData();
//		this.changeHtitle();
	},
	activated(){
		this.getData();
		
	}
}
</script>

<style lang="scss" scoped="scoped">
.back_btn {
	position: absolute;
	font-size: 50px;
	color: white;
	top: 0;
}

.movie-filter {
	position: absolute;
	top: 0;
	margin-top: 50px;
	width: 100%;
	height: 188px;
	background-color: #40454d;
	/*opacity: .55;*/
	.pic {
		width: 107px;
		height: 150px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.box {
		display: flex;
		padding: 19px 30px 19px 15px;
	}
}

.details {
	color: #fff;
	margin-left: 12.5px;
}

.score {
	font-size: 18px;
	font-weight: 700;
	color: #fc0;
	margin-top: 11px;
}
.wantSee{
	font-size: 14px;
}

.snum {
	margin-top: 10px;
	font-size: 12px;
	color: #fff;
	opacity: .8;
}

.title {
	font-size: 20px;
	margin-top: 2px;
	font-weight: 700;
	overflow: hidden;
}

.title-en-name {
	margin-top: 10px;
	font-size: 12px;
	color: #fff;
	opacity: .8;
}

.type {
	font-size: 12px;
	color: #fff;
}

.type-group {
	display: inline-block;
	width: 42px;
	opacity: .85;
}

.src {
	margin-top: 10px;
	font-size: 12px;
	color: #fff;
	opacity: .8;
}

.pubDesc {
	margin-top: 10px;
	font-size: 12px;
	color: #fff;
	opacity: .8;
}
.no-score{
	font-size: 12px;
    color: #fff;
    opacity: .8;
}
</style>